<template lang="pug">
  .upload-body
    .upload-steps
      el-steps(align-center :active="active" finish-status="success")
        el-step(title="选择材料分类")
        el-step(title="填写材料信息")
        el-step(title="填写材料属性")
        el-step(title="选择材料关联")
    section(v-if="active == 0 && isLoading")
      category-module(@next="next(1)")
    section(v-if="active == 1")
      info-module(@next="next(2)" @prev="next(0)")
    section(v-if="active == 2")
      attr-module(@next="next(3)" @prev="next(1)")
    section(v-if="active == 3")
      related-module(@prev="next(2)")
  </template>
  
  <script>
  import categoryModule from './module/category'
  import infoModule from './module/info'
  import attrModule from './module/attr'
  import relatedModule from './module/related'
  import { getSampleDetail, getRoomMaterialDetail } from 'api'
  import { mapActions } from 'vuex'
  export default {
    name: 'upload',
    components: {
      categoryModule,
      infoModule,
      attrModule,
      relatedModule
    },
    data () {
      return {
        active: 0,
        isLoading: false,
        form: {}
      }
    },
    methods: {
      ...mapActions([
        'changeMaterialData'
      ]),
      next (acitve) {
        document.getElementsByClassName('view')[0].scrollTop = 0
        this.active = acitve
      },
      async init () {
          try {
            if (this.$route.query.form && this.$route.query.form === 'material') {
              const { ResultSet } = await this.$axios.post(getRoomMaterialDetail, { id: this.$route.params.id })
              let newForm = { ...ResultSet.userData.addSampleDto, sampleDeliverTime: ResultSet.userData.addSampleDto.sampleDeliverTime + '', sampleDeliveryCycle: ResultSet.userData.addSampleDto.sampleDeliveryCycle + '' }
              let newSpec = {
                items: ResultSet.userData.addSampleDto.materialData.items,
                prices: ResultSet.userData.addSampleDto.materialData.table
              }
              let valid = newForm.samplePhotosList.some(item => item.isMain)
              if (!valid) newForm.samplePhotosList[0].isMain = true
              newForm.spec = newSpec
              await this.changeMaterialData({ form: newForm })
              this.isLoading = true
            } else {
              const { ResultSet } = await this.$axios.post(getSampleDetail, { id: this.$route.params.id })
              let newForm = { ...ResultSet.userData.addSampleDto, sampleDeliverTime: ResultSet.userData.addSampleDto.sampleDeliverTime + '', sampleDeliveryCycle: ResultSet.userData.addSampleDto.sampleDeliveryCycle + '' }
              let newSpec = {
                items: ResultSet.userData.addSampleDto.materialData.items,
                prices: ResultSet.userData.addSampleDto.materialData.table
              }
              let valid = newForm.samplePhotosList.some(item => item.isMain)
              if (!valid) newForm.samplePhotosList[0].isMain = true
              newForm.spec = newSpec
              await this.changeMaterialData({ form: newForm })
              this.isLoading = true
            }
          } catch (err) {
            console.log(err)
            this.$message.error(err.message || err.ResultSet.errors)
          }
        }
    },
    beforeRouteEnter (to, from, next) {
      next(vm => {
        if (to.params.id) vm.init()
        else vm.isLoading = true
      })
    },
    beforeRouteLeave (to, from, next) {
      this.changeMaterialData({ form: {}, currentValue: '' })
      next()
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .upload-body {
    padding: 0 32px 16px;
    min-width: 1365px;
  }
  </style>